<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" :title="title"
               :visible.sync="showDialog">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="subData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="14">
            <el-form-item label="角色名" prop="name">
              <el-input v-model="subData.name" placeholder="请输入角色名" clearable
                        :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-tree
              :props="defaultProps"
              node-key="id"
              ref="tree"
              :default-checked-keys="subData.menus"
              :default-expanded-keys="subData.menus"
              show-checkbox
              :data="menuTree"
              @check="currentChecked">
            </el-tree>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="13px" label="" prop="status" required>
              <el-switch v-model="subData.status" active-text="正常" inactive-text="锁定"
                         active-color="#13CE66"
                         inactive-color="#FF4949" :active-value="0" :inactive-value="1"
                         @change="changeStatus(subData.status)"></el-switch>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from '../../utils/request'

export default {
  inheritAttrs: false,
  components: {},
  // 接受父组件传递的值
  props: {
    addOrUpdateVisible: {
      type: Boolean,
      default: false
    },
    subData: {
      type: Object,
      default: null
    },
    title: {
      type: String
    },
    tag: {
      type: Number
    },
    menuTree: {
      type: Array
    },
    originName: {
      type: String
    }
  },
  data () {
    return {
      rules: {
        name: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }, {
          min: 2,
          max: 9,
          message: '长度在 2 到 9 个字符',
          trigger: 'blur'
        }],
      },
      // 控制弹出框显示隐藏
      showDialog: false,
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      selectKeys: []
    }
  },
  computed: {},
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible () {
      this.showDialog = this.addOrUpdateVisible
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    onOpen () {
    },
    onClose () {
      this.$refs['elForm'].resetFields()
      this.$emit('changeShow', 'false')
      this.subData.menus = []
    },
    close () {
      this.$refs['elForm'].resetFields()
      this.$emit('changeShow', 'false')
      this.subData.menus = []
    },
    async handleConfirm () {
      let temp = 0
      await this.$refs['elForm'].validate(valid => {
        if (!valid) {
          this.$message({
            message: '请填好表单后提交',
            type: 'warning'
          })
          temp = 1
        }
      })
      if (temp) {
        return
      }
      let data = await request({
        url: '/role/roleUpOrAdd',
        method: 'post',
        data: {
          id: this.subData.id,
          name: this.subData.name,
          originName: this.originName,
          menus: this.selectKeys,
          status: this.subData.status,
          tag: this.tag,
        }
      })
      if (data.data.code === '2000') {
        this.$message({
          message: data.data.msg,
          type: 'success'
        })
      } else {
        this.$message({
          message: data.data.msg,
          type: 'error'
        })
      }
      this.$emit('changeShow', 'false')
    },
    // 弹出框关闭后触发
    handleClose () {
      // 子组件调用父组件方法，并传递参数
      this.$emit('changeShow', 'false')
    },
    changeStatus (status) {
      status ^= 1
    },
    currentChecked (nodeObj, SelectedObj) {
      // 选中key
      this.selectKeys = SelectedObj.checkedKeys
    },

  }
}

</script>
<style>
</style>
